<div id="content" class="jp-container">
    <h1><?php echo _("Live stream") ?></h1>
    <a id="popup-link" href="#"><?php echo _("Share") ?></a>
    <?php $ids = Application_Model_StreamSetting::getEnabledStreamIds(); ?>
    <script>
        function setjPlayer(url, type, serverType) {
            var obj = new Object();
            obj[type] = url;

            if (serverType == 'shoutcast') {
                obj[type] = url + ";stream/1";
            }

            $("#jquery_jplayer_1").jPlayer("destroy");
            $("#jquery_jplayer_1").jPlayer({
                ready: function() {
                    $(this).jPlayer("setMedia", obj);
                },
                ended: function(event) {
                    $(this).jPlayer("play");
                },
                swfPath: "/js/jplayer/",
                supplied: type,
                wmode: "window"
            });
        }

        $(document).ready(function() {

            $("#combo-box").change(function(eventObject) {
                var elem = $("#combo-box option:selected");
                setjPlayer(elem.attr("data-url"), elem.attr("data-type"), elem.attr("server-type"));
            });

            <?php
            if (count($ids) > 0) {
                $id = $ids[0];
                $streamData = Application_Model_StreamSetting::getStreamData($id);
                $url = $streamData["${id}_public_url"];
                $type = $streamData["${id}_type"];
                $serverType = $streamData["${id}_output"];
                if ($type == "ogg" || $type == "opus")
                    $type = "oga";
                if ($type == "aac")
                    $type = "m4a";
                echo "setjPlayer('$url', '$type', '$serverType');";
            }
            ?>

            $("#popup-link").click(function() {
                $("#popup-share").show("slow");
                $("#popup-share-link").val($("#combo-box option:selected").attr("data-url"));
            });

            $("#popup-close").click(function() {
                $("#popup-share").hide("slow");
            });
        });
    </script>
    <div class="jp-logo"><img id="logo-img" onload='resizeToMaxHeight(this, 40);' src="<?php echo $this->logo ?>" /></div>
    <div id="popup-share">
        <a class="close-round" href="#" id="popup-close"></a>
        <input id="popup-share-link" type="text" readonly="readonly" />
    </div>
    <div class="jp-stream stream-player-label">
        <div class="jp-stream-text"><?php echo _("Select stream:"); ?></div>

        <form id="form1" method="post" action="">
            <select id="combo-box">
                <?php
                foreach ($ids as $id) {
                    $streamData = Application_Model_StreamSetting::getStreamData($id);
                    $url = $streamData["${id}_public_url"];
                    $type = $streamData["${id}_type"];
                    $serverType = $streamData["${id}_output"];
                    if ($type == "ogg" || $type == "opus")
                        $type = "oga";
                    if ($type == "aac")
                        $type = "m4a";

                    $label = "(" . $streamData["${id}_host"] . ") " . $streamData["${id}_description"] . " - " . $streamData["${id}_bitrate"] . " kbit/s";
                    echo sprintf("<option class='stream' value='%s' data-url='%s' data-type='%s' server-type='%s'>%s</option>", $id, $url, $type, $serverType, $label);
                }
                ?>
            </select>
        </form>
    </div>
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div id="jp_interface_1" class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a title="play" tabindex="1" class="jp-play" href="javascript:;" style='top: 5px; left: 5px;'><?php echo _("play") ?></a></li>
                    <li><a title="pause" tabindex="1" class="jp-pause" href="javascript:;" style='top: 5px; left: 5px;'><?php echo _("pause") ?></a></li>
                    <li><a title="mute" tabindex="1" class="jp-mute" href="javascript:;"><?php echo _("mute") ?></a></li>
                    <li><a title="unmute" tabindex="1" class="jp-unmute" href="javascript:;"><?php echo _("unmute") ?></a></li>
                </ul>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
            <div id="jp_playlist_1" class="jp-playlist"></div>
        </div>
    </div>
